@import "~common/css/_variables.scss";

.head {
  padding: 30px;
  display: flex;

  .cover_img {
    position: relative;
    width: 200px !important;
    height: 200px !important;
    min-width: 200px;
    border: 1px solid $color1;
    border-radius: 4px;
    box-shadow: inset 0 0 0 1px $color1;

    img {
      position: absolute;
      top: 1px;
      left: 1px;
      width: 196px;
      height: 196px;
      border-radius: 4px;
    }

    &::before,
    &::after {
      position: absolute;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
      content: "";
      border-radius: 4px;
      animation-delay: 0s;


    }

    &:hover {

      &::before,
      &::after {
        border: 2px solid $color;
        animation: clip 10s linear infinite;
      }
    }

    @keyframes clip {

      0%,
      100% {
        clip: rect(0px, 200px, 2px, 0px);
      }

      25% {
        clip: rect(0px, 2px, 200px, 0px);
      }

      50% {
        clip: rect(198px, 200px, 200px, 0px);
      }

      75% {
        clip: rect(0px, 200px, 200px, 198px);
      }
    }



    .accountId {
      position: absolute;
      left: 50%;
      bottom: 20px;
      transform: translateX(-50%);
      height: 26px;
      padding: 0 34px 0 30px;
      line-height: 24px;
      white-space: nowrap;
      color: $cfff;
      border-radius: 20px;
      border: 1px solid $color7;
      background-color: $color7;

      &:hover {
        cursor: pointer;
        border: 1px solid $color;
        background-color: $color;
      }
    }
  }

  .single_info {
    width: 100%;
    padding-left: 30px;

    .top {
      padding-top: 6px;

      &.top_border {
        padding-bottom: 10px;
        border-bottom: 1px solid #e5e6ea;
      }

      .flex_box {
        display: flex;
        justify-content: space-between;
      }

      .name_box {
        display: flex;
        align-items: center;

        .type {
          color: $color;
          border-radius: 2px;
          padding: 2px 6px;
          font-size: $fz13;
          border: 1px solid $color;
          white-space: nowrap;
          margin-right: 5px;
        }

        .name {
          font-size: $fz20;
          font-weight: 500;
        }

        .vipType {
          width: 60px;
          height: 16px;
          background: url("~common/images/icon_vip_type.png") center center / cover no-repeat;
          margin-left: 10px;
        }

        .man {
          width: 24px;
          height: 24px;
          background: url("~common/images/icon_man.png") center center / 20px 20px no-repeat;
          margin: 0 8px;
        }

        .woman {
          width: 24px;
          height: 24px;
          background: url("~common/images/icon_woman.png") center center / 20px 20px no-repeat;
          margin: 0 8px;
        }

        .level {
          padding: 2px 10px;
          border-radius: 10px;
          color: $color;
          font-weight: 600;
          font-style: oblique;
          border: 1px solid $color;
        }
      }

      .count {
        display: flex;
        white-space: nowrap;
        color: $c999;

        p {
          display: flex;
          flex-direction: column;
          padding: 0 10px;

          &:not(:last-child) {
            border-right: 1px solid #e5e6ea;
          }

          span {
            text-align: right;

            &:last-child {
              margin-top: 4px;
            }
          }
        }
      }

      .userBtn {
        display: flex;
        align-items: center;

        div {
          display: table;
          height: 24px;
          line-height: 22px;
          padding: 0 10px;
          text-align: center;
          border-radius: 4px;
          font-size: 12px;
          color: #fff;
          cursor: pointer;
          border: 1px solid $color7;
          background-color: $color7;


          &:not(:first-child) {
            margin-left: 16px;
          }

          &:hover {
            border: 1px solid $color;
            background-color: $color;
          }
        }
      }

      .followed {
        display: table;
        height: 24px;
        line-height: 22px;
        padding: 0 10px 0 34px;
        text-align: center;
        border-radius: 4px;
        font-size: 12px;
        cursor: pointer;
        color: #fff;
        border: 1px solid $color7;

        &.is_followed {
          background: $color7 url("~common/images/is_followed.png") top 4px left 5px / 22px no-repeat;
        }

        &.not_followed {
          background: $color7 url("~common/images/not_followed.png") top 4px left 5px / 22px no-repeat;
        }

        &:hover {
          border: 1px solid $color;
          background-color: $color;
        }
      }

      .allAuthTypes {
        margin-top: 10px;

        li {
          font-size: $fz12;
          display: flex;
          align-items: center;

          span {
            width: 14px;
            height: 14px;
            border-radius: 50%;
            background: url("~common/images/allAuthTypes.png") center left / 14px no-repeat;
            margin-right: 4px;
          }
        }
      }
    }

    .center {
      padding-top: 16px;
      display: flex;
      align-items: center;

      img {
        width: 30px;
        height: 30px;
        border-radius: 50%;
        cursor: pointer;
      }

      span {
        &:nth-child(2) {
          color: $c666;
          padding-left: 8px;
          cursor: pointer;
        }

        &:nth-child(3) {
          color: $c888;
          font-size: $fz12;
          padding-left: 10px;
        }
      }
    }

    .artist_count {
      color: $c333;
      margin-top: 24px;

      div {
        margin-bottom: 10px;

        span {
          color: $c999;
        }
      }
    }

    .userCount {
      display: flex;
      padding-right: 10px;

      div {
        display: flex;
        flex-direction: column;
        padding-right: 30px;
        margin-top: 10px;
        color: $c333;

        &:not(:first-child) {
          padding-left: 30px;
          border-left: 1px solid #e5e6ea;
        }

        span {
          &:first-child {
            font-size: $fz24;
          }

          &:last-child {
            margin-top: 5px;
            font-size: $fz12;
          }
        }
      }
    }

    .btn_group {
      padding-top: 16px;
      display: flex;
      align-items: center;

      .btn {
        cursor: pointer;
        font-size: $fz12;
        height: 30px;
        line-height: 30px;
        padding: 0 16px;
        border-radius: 20px;
        margin-left: 10px;
        outline: none;
        color: $cfff;
        border: 1px solid $color7;
        background-color: $color7;

        &:first-child {
          margin-left: 0;
          // border: 1px solid $color;
          // background-color: $color;
        }

        &:hover {

          border: 1px solid $color;
          background-color: $color;
        }

      }
    }

    .other {
      .tags {
        padding-top: 20px;

        span {
          padding: 0 5px;
          cursor: pointer;
          font-size: $fz12;
        }
      }

      .desc {
        padding-top: 10px;
        overflow: hidden;
      }
    }

    .user_other {
      margin-top: 20px;
      font-size: $fz12;

      div {
        margin-top: 10px;
      }
    }
  }
}